vue-sanitize

基於sanitize-html的Vue.js HTML sanitizer

Github

daichirata/vue-sanitize

範例

Vue.use(VueSanitize);

clened = this.$sanitize(dirty);

若要自行設定白名單，方式如下：

const defaultOptions = {
  allowedTags: ['div', 'img'],
  allowedAttributes: {
    'img': ['src', 'style']
  }
};

Vue.use(VueSanitize, defaultOptions);

clenedHtml = this.$sanitize(dirtyHtml);

以上設定將原始HTML：

<div class="form-control">This is DIV<div>
<label class="form-control">This is LABEL</label>
<div><a href="https://vuejs.org"><img src="https://vuejs.org/images/logo.png" style="width:50px;height:50px" /></a></div>

整理為：

<div>This is DIV<div>
This is LABEL
<div><img src="https://vuejs.org/images/logo.png" style="width:50px;height:50px;"></div>

也可以在sanitize時，直接加入參數：

cleanedHtml = this.$sanitize(dirtyHtml,
      {
         allowedTags: ['div', 'a']
      });

sanitize-html

vue-sanitize僅封裝了sanitize-html的函式，
若要使用更進階的功能，可直接使用sanitize-html：

import sanitizeHTML from 'sanitize-html';
Vue.prototype.$sanitize = sanitizeHTML

預設白名單

預設白名單可參考Default options。
以下為官方文件2018-11-1的資訊：

allowedTags: [ 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
  'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
  'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'iframe' ],
allowedAttributes: {
  a: [ 'href', 'name', 'target' ],
  img: [ 'src' ]
},
selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],
allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
allowedSchemesByTag: {},
allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
allowProtocolRelative: true

使用預設白名單並新增

若要新增白名單，可透過以下方式：

1. Sanitize時額外設定

cleanedHtml = vm.$sanitize(dirtyHtml, {
        allowedTags: this.$sanitize.defaults.allowedTags.concat(['script','img' ])
      });

2. 或於vue instance建立後設定：

this.$sanitize.defaults.allowedTags = 
          this.$sanitize.defaults.allowedTags.concat(['script','img' ]);
this.$sanitize.defaults.allowedAttributes.img = 
        this.$sanitize.defaults.allowedAttributes.img.concat(['src','style']);

允許Data Uri

可透過allowedSchemes參數設定允許Data Uri：

this.$sanitizeHtml(
  '<img src="data:image/png;base64,XXXXXX" />',
  {
    allowedSchemes: [ 'data' ]
  }
);

若僅允許img的src可為Base64的資料，可利用allowedSchemesByTag：

this.$sanitizeHtml(
  '<img src="data:image/png;base64,XXXXXX" />',
  {
    allowedSchemesByTag: {
        img: [ 'data' ]
    }
  }
);

若要再針對可允許的URL schemas套用到哪些Html attribute，可同時設定allowedSchemes及allowedSchemesAppliedToAttributes

 cleanedHtml = vm.$sanitize(vm.dirtyHtml, {
        allowedSchemes: [ 'https' ],
        allowedSchemesAppliedToAttributes: ["src"]
      });

以上設定將使<img src="http://vuejs.org/images/logo.png" />的src被清除；
但<img src="https://vuejs.org/images/logo.png" />則可正常顯示圖片。

Sample code